<template>
    <div>
      <div class="shopcontanier">
			<div class="mui-card">
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
                        <mt-switch ></mt-switch>
                        <img src="//img11.360buyimg.com/jdphoto/s80x80_jfs/t27847/91/107794072/6854/14716732/5b850ecaN644d2983.png" alt="">
                        <div class="shop_price">
                            <h1>小米（MI）小米NOTE  16G双网班</h1>
                            <p>
                                <span>￥2199</span>
                                <span>
                                    <numbershop></numbershop>
                                    
                                   
                                </span>
                                <a href="#">删除</a>
                            </p>
                        </div>
					</div>
				</div>
    </div>
                <!-- 假如数据获取成功 -->
                <!-- <div class="mui-card" v-for="(item,i)in shoplist" :key="item.id">
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
                        <mt-switch v-model="this.$store.getters.shopselected(item.id)" @change="changed(item.id,this.$store.getters.shopselected(item.id))"></mt-switch>
                        <img :src="item.src" alt="">
                        <div class="shop_price">
                            <h1>小米（MI）小米NOTE  16G双网班</h1>
                            <p>
                                <span>￥{{item.price}}</span>
                                <span>
                                <numbershop  :id="this.$store.getters.shopcount(item.id)" :id2="item.id"></numbershop>
                                </span>
                                <a href="#" @click.prevent="remove(item.id,i)">删除</a>
                            </p>
                        </div>
					</div>
				</div> -->



			</div>
            			<div class="mui-card">
				<div class="mui-card-content">
					<div class="mui-card-content-inner allcount">
						<div class="left">
                            <p>总价（不含运费）</p>
                            <p>已勾选商品 <span style="color: red"><strong>{{this.$store.getters.Allcountprice.count}}</strong></span>件，总价 ￥<span style="color: red"><strong>{{this.$store.getters.Allcountprice.price}}</strong></span></p>
                        </div>
                        <div class="right">
                            <mt-button type="danger" size="small">去结算</mt-button>
                        </div>
					</div>
				</div>
			</div>
     
    </div>
</template>
<script>
import numbershop from '../subcontent/numberboxshopcar.vue'
export default {
    data() {
        return {
            shoplist: []
        }
    },
    methods: {
        getshow() {
            var idDrr = [] 
            this.$store.state.list.forEach(element => {
            
               idDrr.push(element.id)
            });
            // 首先判断数组会否为空，如果为空就不进行ajax请求了
            if  (idDrr.length == 0) {
                return true
            }
            // join() 方法的作用是将数组进行转换成  元素1，元素2，元素3, 这样的字符串
            this.$http.get('api/get' + idDrr.join()).then(function(res) {
                if (res.body.status == 0) {
                    this.shoplist = res.body.message
                }
            })
        },
        // 这是用来删除购物车里面的对应商品
        remove(id,index) {
            this.shoplist.splice(index,i)
            this.$store.commit('removeincrement',id)
        },
        // 这是用来传递购物车的选中状态
        changed(id,val) {
            console.log(id + '----' + val);
            this.$store.commit('selectedincrement',{
                id: id,
                selected: val
            })
        }
    },
    components: {
        numbershop
    }
}
</script>
 <style lang="scss" scoped>
    .shopcontanier {
        overflow: hidden;
        background-color: #ccc;
        .mui-card-content-inner{
            display: flex;
            // 设置侧轴居中对齐
            align-items: center;  
            img {
                height: 50px;
                widows: 50px;
                margin: 0 8px;
            }
            h1 {
                font-size: 13px;
            }
            .shop_price {
                display: flex;
                flex-direction: column;
                justify-content: space-between;
            }
            p {
                margin-bottom: 0;
                margin-top: 5px;
            }
        }
    }
    .allcount {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
</style>>

